
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>爱康健维关注就送礼品</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        body{
            background: #ce0814;
            position: relative;
        }
        .top_banner{
            display: block;
            width: 100%;
            height: auto;
            overflow: hidden;
        }

        .ggl{
            position: relative;
            width: 86%;
            height: 100px;
            margin: -5px auto;
            background: url(${base}/static/img/ggl.png) no-repeat center center;
            background-size: 100% 100%;
        }

        .canvas{
            position:absolute;
            top:2px;
            left:2.5%;
            width:95%;
            height:92px;
            line-height:140px;
            text-align:center;
            z-index: 2;

        }

        .info{
            position:absolute;
            top:2px;
            left:2.5%;
            width:95%;
            height:82px;
            text-align:center;
        }
        .info span{
            display: block;
            font-size: 18px;
        }
        #prompt{
            margin: 8px auto;
            line-height: 40px;
        }
        .btn{
            position: relative;
            width: 50%;
            height: 35px;
            line-height: 35px;
            background: #df412b;
            color: #fff;
            border-radius: 5px;
            margin: 0 auto;
            z-index: 1;
        }
        .lottery_rule {
            margin: 30px auto;
            width: 85%;
            height: 200px;
            background: url(${base}/static/img/rule_bg.jpeg) no-repeat;
            padding: 5px;
            background-size: 100% 100%;
        }

        .lottery_rule > img {
            width: 85.6%;
            margin: 0 auto;
            border-radius: 5px;
        }

        .lottery_rule ul {
            list-style: none;
            margin: 75px auto;
            width: 90%;
            padding: 0 20px;
        }

        .lottery_rule ul li {
            margin: 5px auto;
            font-size: 12px;
            font-style: oblique;
            font-weight: 400;
            /*background:url('${base}/static/img/rule_star.png') no-repeat 0px 0px;*/
        }

        #ok, #no{display: none;}

        #bookInWinner {
            display: none;
            width: 90%;
            height: 400px;
            margin: 0 auto;
            position: absolute;
            background: #ffdd67;
            left: 3.3%;
            top: 30%;
            z-index: 99;
            padding: 6px;
            border-radius: 12px;
        }

        .gala_tip {
            text-align: center;
            font-size: 24px;
            color: #e1452e;
            font-weight: 200;
            margin: 5px 15%;
        }

        .reward_img {
            text-align: center;
        }

        .reward_img > img {
            width:64px;
            height:64px;
            border-radius: 50%;
        }

        .backdrop {
            display: none;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 98;
            background-color: rgba(0,0,0,.3);
        }
    </style>
</head>
<body>
<div id="mask" class="backdrop"></div>
<img src="${base}/static/img/top_banner.png" class="top_banner"/>
<div class="ggl" id="top">
    <div class="info" id="prize">
        <span id="prompt"></span>
        <span class="btn" id="ok">领取奖品</span>
        <span class="btn" id="no">返回商城</span>
    </div>
    <canvas id="c1" class="canvas"></canvas>
</div>

<div class="lottery_rule">
    <ul>
        <li>1.用户首次关注爱康健维公众号获得一次抽奖机会.</li>
        <li>2.抽中奖后不及时填写相关信息视为作废.</li>
        <li>3.活动最终解释权归上海爱康健维咨询服务有限公司所有.</li>
    </ul>
</div>

<div id="bookInWinner">
    <div class="gala_tip" style="">恭喜中奖啦</div>
    <div class="reward_img">
        <img src="${base}${rwdImg!""}" />
    </div>
    <div class="weui-cells weui-cells_form" style="margin:2px 0">
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" id="wName" maxlength="20"/>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">手机号码</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="tel" id="wPhone" maxlength="12"/>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">地区</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" id="wAreas"/>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">详细地址</label></div>
            <div class="weui-cell__bd">
                <textarea id="wAddr" class="weui-textarea" placeholder="请输入地址" rows="2"></textarea>
            </div>
        </div>
    </div>
    <div class="weui-btn-area" style="margin-top: 15px">
        <a class="weui-btn weui-btn_primary" href="javascript:" id="bookInBtn" style="background:#e1452e">确定</a>
    </div>
</div>
<script src="http://demo.genban.org/demo/224/js/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>
<script src="http://cdn.bootcss.com/jquery-weui/1.0.1/js/city-picker.min.js"></script>
<script>

    var initialize  = function () {

        var btn = document.getElementsByClassName("btn");
        for(var i=0; i<btn.length; i++){
            btn[i].style.zIndex = '1';
        }
        document.getElementById("no").style.display = "none";
        document.getElementById("ok").style.display = "none";
        document.getElementById("no").onclick = function () {
            window.location.href = '${base}/front/shop/home.do'
        }

        //初始化涂抹面积
        isOk = 0;
        var rwdId = parseInt('${rwdId!"0"}');
        var prompt = "您已参与过抽奖啦！";
        document.getElementById("no").style.display = "block";
//        document.getElementById("prompt").style.marginTop = "25px";
        document.getElementById("prompt").style.marginTop = "8px";
        if(rwdId > 0){
            prompt="恭喜您，中了个${rwdName!""}！"
            var ok =document.getElementById("ok");
            ok.style.display = "block";
            document.getElementById("no").style.display = "none";

            ok.onclick = function () {
                $('#mask').fadeIn(100);
                $('#bookInWinner').fadeIn(200);
            };
        }else if(rwdId == 0) {
            prompt="很遗憾，未中奖！";
        }

        document.getElementById("prompt").innerHTML = prompt;
    };

    var c1;
    var ctx;
    var ismousedown;
    var isOk=0;
    var fontem = parseInt(window.getComputedStyle(document.documentElement, null)["font-size"]);

    $(function(){
        $.showLoading();
        initialize();
        c1 = document.getElementById("c1");

        c1.width=c1.clientWidth;
        c1.height=c1.clientHeight;
        ctx = c1.getContext("2d");

        c1.addEventListener("mousemove",eventMove,false);
        c1.addEventListener("mousedown",eventDown,false);
        c1.addEventListener("mouseup",eventUp,false);

        c1.addEventListener('touchstart', eventDown,false);
        c1.addEventListener('touchend', eventUp,false);
        c1.addEventListener('touchmove', eventMove,false);

        initCanvas();


        $('#bookInBtn').bind('click', function () {
            var wName = $('#wName').val();
            var wPhone = $('#wPhone').val();
            var wAreas = $('#wAreas').val();
            var wAddr = $('#wAddr').val();

            if (wName=='') {
                $.toptip('请输入收货人姓名');
                return;
            }
            if (wPhone=='') {
                $.toptip('请输入收货人手机号码');
                return;
            }
            if (wAreas=='') {
                $.toptip('请输入收货城市');
                return;
            }
            if (wAddr=='') {
                $.toptip('请输入收货详细地址');
                return;
            }

            $.post('${base}/front/lotdraw/bookInWinLog.do',
                {
                    winId:${winId},
                    wUser:wName,
                    wPhone:wPhone,
                    wAreas:wAreas,
                    wAddr:wAddr
                },
                function (result) {
                    if(result.ok) {
                        $.toast('领奖成功');
                        setTimeout(function () {
                            window.location.href = '${base}/front/shop/home.do';
                        }, 1500);
                    } else {
                        $.toast('领奖失败');
                    }
                },
                'json');
        });

        $("#wAreas").cityPicker({
            title: "请选择收货城市"
        });

        $.hideLoading();
    });

    function initCanvas(){
        ctx.globalCompositeOperation = "source-over";
        ctx.fillStyle = '#aaaaaa';
        ctx.fillRect(0,0,c1.clientWidth,c1.clientHeight);
        ctx.fill();

        ctx.font = "Bold 24px Arial";
        ctx.textAlign = "center";
        ctx.fillStyle = "#999999";
        ctx.fillText("刮一刮",c1.width/2,55);

        ctx.globalCompositeOperation = 'destination-out';
    }

    function eventDown(e){
        e.preventDefault();
        ismousedown=true;
    }

    function eventUp(e){
        e.preventDefault();

        var a = ctx.getImageData(0,0,c1.width,c1.height);
        var j=0;
        for(var i=3;i<a.data.length;i+=4){
            if(a.data[i]==0)j++;
        }

        if(j>=a.data.length/8){
            isOk = 1;
        }
        ismousedown=false;
    }

    function eventMove(e){
        e.preventDefault();
        if(ismousedown) {
            if(e.changedTouches){
                e=e.changedTouches[e.changedTouches.length-1];
            }
            var topY = document.getElementById("top").offsetTop;
            var oX = c1.offsetLeft,
                oY = c1.offsetTop+topY;

            var x = (e.clientX + document.body.scrollLeft || e.pageX) - oX || 0,
                y = (e.clientY + document.body.scrollTop || e.pageY) - oY || 0;

            ctx.beginPath();
            ctx.arc(x, y, fontem*1.2, 0, Math.PI * 2,true);

            c1.style.display = 'none';
            c1.offsetHeight;
            c1.style.display = 'inherit';

            ctx.fill();
        }

        if(isOk){
            var btn = document.getElementsByClassName("btn");
            for(var i=0; i<btn.length; i++){
                btn[i].style.zIndex = '3';
            }
            document.getElementsByClassName("btn")[0].style.zIndex="3";
        }
    }


</script>

</body>

</html>